<template >
	<view class="start-index">
		<!-- 提示信息 -->
		<u-toast ref="uToast" />
		<!-- #ifdef MP-WEIXIN -->
		<u-modal title="用户隐私保护" :show="showPrivacy" :showClose="false" :showCancelButton="true">
			<view class="text-box">
				在您使用本小程序之前，请您仔细阅读、充分理解<text class="text" @click="openPrivacyContract">《用户隐私保护指引》</text>内容。
				如您同意<text class="text" @click="openPrivacyContract">《用户隐私保护指引》</text>中的全部内容，您可以点击“同意”按钮开始使用本小程序。
				如您不同意，您应立即停止使用本小程序。
			</view>
			<view class="btn-box" slot="confirmButton">
				<button class="disagree-btn" @click="showPrivacy = false">拒绝再看看</button>
				<button class="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="showPrivacy = false">同意并继续</button>
			</view>
		</u-modal>
		<!-- #endif -->
		<!-- 压屏窗-->
		<tn-landscape :show="add" @close="add=false" closePosition="bottom" :closeSize="60">
			<view class="tn-flex" style="margin-bottom: 100rpx;padding-top: 46vh;" @touchmove.stop.prevent="touchMove">
			  <view class="tn-flex-1 tn-margin-sm tn-radius" @click="clickToBtn('/circle/article/article')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				  <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
					<view class="tn-icon-camera-fill"></view>
				  </view>
				  <view class="tn-color-white tn-text-sm tn-text-center">
					<text class="tn-text-ellipsis">发动态</text>
				  </view>
				</view>
			  </view>
			  <!-- <view class="tn-flex-1 tn-margin-sm tn-radius" @click="clickToBtn('/circlePages/create')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				  <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
					<view class="tn-icon-flag-fill"></view>
				  </view>
				  <view class="tn-color-white tn-text-sm tn-text-center">
					<text class="tn-text-ellipsis">发活动</text>
				  </view>
				</view>
			  </view> -->
			  <view class="tn-flex-1 tn-margin-sm tn-radius" @click="clickToBtn('/circle/create/create')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				  <view class="icon9__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
					<view class="tn-icon-topics-fill"></view>
				  </view>
				  <view class="tn-color-white tn-text-sm tn-text-center">
					<text class="tn-text-ellipsis">创圈子</text>
				  </view>
				</view>
			  </view>
			</view>
		</tn-landscape>
		<view v-if="tabberPageLoadFlag[0]" :style="{ display: currentIndex === 0 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<home ref="homeRef"></home>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{ display: currentIndex === 1 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<circle ref="circleRef"></circle>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{ display: currentIndex === 3 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<message ref="messageRef"></message>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{ display: currentIndex === 4 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<user ref="userRef"></user>
			</scroll-view>
		</view>

		<tn-tabbar 
			v-model="currentIndex"
			:list="tabbarList"
			activeColor="#838383"
			inactiveColor="#AAAAAA"
			activeIconColor="#FBBD12"
			:animation="true"
			:safeAreaInsetBottom="true"
			@click="add=true"
			@change="switchTabbar"
		>
		</tn-tabbar>
	</view>
</template>

<script>
import Home from '@/pages/home/home.vue'
import Circle from '@/pages/circle/circle.vue'
import Message from '@/pages/message/message.vue'
import User from '@/pages/user/user.vue'

import { getUserInfo } from '@/api'
export default {
	components: {
		Home,
		Circle,
		Message,
		User
	},
	data() {
		return {
			// 用户信息
			// userInfo: this.$store.getters.getUserInfo,
			// 是否显示发布
			add: false,
			// 是否显示用户隐私保护
			showPrivacy: false,
			// 底部tabbar菜单数据
			tabbarList: [{
				title: '首页',
				type: 'tabbar',
				activeIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/home_tnnew.png',
				inactiveIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/home_tn.png'
			},
			{
				title: '圈子',
				type: 'tabbar',
				activeIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/circle_tnnew.png',
				inactiveIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/circle_tn.png'
			},
			{
				title: '添加',
				type: 'event',
				activeIcon: 'add-circle',
				inactiveIcon: 'add-circle',
				activeIconColor: '#FFFFFF',
				inactiveIconColor: '#FFFFFF',
				iconSize: 50,
				out: true
			},
			{
				title: '消息',
				type: 'tabbar',
				activeIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/preferred_tnnew.png',
				inactiveIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/preferred_tn.png',
			},
			{
				title: '我的',
				type: 'tabbar',
				activeIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/mine_tnnew.png',
				inactiveIcon: 'https://oss-1257486725.cos.ap-guangzhou.myqcloud.com/cuui/mine_tn.png'
			}
			],
			currentIndex: 0,
			tabberPageLoadFlag: []
		}
	},
	onLoad(options) {
		const index = Number(options.index || 0)
		// 根据底部tabbar菜单列表设置对应页面的加载情况
		this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
			return index === tabbar_index
		})
		this.switchTabbar(index)
	},
	onShow() {
		// console.log('onShow', this.currentIndex);
		if (this.currentIndex === 1) {
			this.$refs.circleRef.getIndexList && this.$refs.circleRef.getIndexList();
		}
		// #ifdef MP-WEIXIN
		if (wx.getPrivacySetting) {
			wx.getPrivacySetting({
				success: res => {
					if (res.needAuthorization) {
						this.showPrivacy = true
					}
				}
			})
		}
		// #endif
		if (this.isLogin) {
			this.getUserInfo();
		}
	},
	methods: {
		// 切换导航
		switchTabbar(index) {
			const selectPageFlag = this.tabberPageLoadFlag[index]
			if (selectPageFlag === undefined) return;
			if (selectPageFlag === false) {
				this.tabberPageLoadFlag[index] = true
			}
			this.currentIndex = index
		},

		// 导航页面滚动到底部
		tabbarPageScrollLower(e) {
			// console.log(this.currentIndex)
			if (this.currentIndex === 1) {
				this.$refs.circleRef.loadMore && this.$refs.circleRef.loadMore();
			}
		},

		// 打开用户隐私保护指引
		openPrivacyContract() {
			wx.openPrivacyContract();
		},

		// 点击
		clickToBtn(e) {
			if (!this.isLogin) {
        		return uni.navigateTo({
        		  url: '/pages/login/login',
        		});
      		}
			uni.navigateTo({ url: e });
			this.add = false;
		},

		// 阻止滑动
		touchMove(e) {
			e.preventDefault()
		},

		async getUserInfo() {
      		const { code, data, message } = await getUserInfo();
      		if (code !== 1000) {
      		  return this.$refs.uToast.show({
      		    type: 'error',
      		    message: message
      		  });
      		}
      		this.$store.commit('MSETUSERINFO', data);
    	},
	}
}
</script>

<style lang="scss" scoped>
.text-box {
	text-indent: 2em;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #838383;

	.text {
		color: #5ac725;
	}
}

.btn-box {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;

	.agree-btn {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		background-color: #5ac725;
		color: #ffffff;
		font-size: 32rpx;
		margin-left: 15rpx;
	}

	.disagree-btn {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		background-color: #ffffff;
		color: #838383;
		font-size: 32rpx;
		border: 2rpx solid #e0e0e0;
		margin-right: 15rpx;
	}
}

.icon9 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 110rpx;
      height: 110rpx;
      font-size: 65rpx;
      border-radius: 50%;
      margin: 20rpx 40rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
      }
    }
  }
}
</style>